<template>
  <div>
    <input v-model="firstname" type="text"> - 
    <input v-model="lastname" type="text">
    全名: <input v-model="fullname" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstname: '爱新觉罗',
      lastname: '溥仪'
    };
  },
  computed: {
    // 计算属性完整写法: 计算属性是一个对象
    // 对象中有 get / set 两个方法
    // get 方法就是简单写法的函数
    fullname: {
      get() {
        return this.firstname + '.' + this.lastname
      },
      // 如果数据被修改, set 会自动执行
      // 将最新的值传递过来
      set(val) {
        // console.log('我是 set 被执行了', val)
        const arr = val.split('.')
        this.firstname = arr[0]
        this.lastname = arr[1]
      }
    }
  }
};
</script>

<style lang="scss" scoped>

</style>